<template>
    <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="order_id" label="订单ID" width="80">
            </el-table-column>
            <el-table-column prop="user_id" label="用户ID" width="80">
            </el-table-column>
            <el-table-column prop="ordered_time" label="下单时间">
            </el-table-column>
            <el-table-column label="线路名称" prop="line_journey">
            </el-table-column>
            <!-- <el-table-column label="景点名称" prop="scenic_name">
            </el-table-column> -->
            <el-table-column prop="total_price" label="总价">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- <el-button type="primary" size="small" @click="edit(scope.row.order_id)" icon="el-icon-edit-outline"></el-button> -->
                    <!-- <el-button type="success" size="small" @click="add()" icon="el-icon-plus"></el-button> -->
                    <el-button size="small" type="danger" @click="del(scope.row.order_id)" icon="el-icon-close"></el-button>
                </template>
                
            </el-table-column>
        </el-table>
        <!-- 分页器background -->
      <el-pagination
        :current-page="query.page"
        :page-sizes="[5,10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
</template>

<script>
import { getOrderListAPI, delOrderAPI } from '@/api'
    export default {
        data () {
            return {
                tableData: [
                    {
                        order_id:'',
                        user_id: '',
                        line_id: '',
                        ordered_time: '',
                        total_price:''
                    }, 
                ],
                query: {
                    page:1,
                    pagesize: 10
                },
                total: 0
            }
        },
        mounted() {
            this.getOrderData()
        },
        methods: {
            async getOrderData() {
                const res = await getOrderListAPI(this.query)
                console.log('获取订单列表', res);
                this.tableData = res.data.data.result
                this.total = res.data.data.total
            },
            del(OrderId) {
                console.log(OrderId);
                this.$confirm('该操作将永久删除订单，是否继续','提示',{type:'warning'}).then(async res => {
                    const result = await delOrderAPI({id: OrderId})
                    // console.log('删除订单', result);
                    this.getOrderData()
                })
               
            },
            handleSizeChange(size) {
            // console.log('每页显示条数', size);
            this.query.pagesize = size
            this.getOrderData()
            },
            handleCurrentChange(page) {
            // console.log('页数', page);
            this.query.page = page
            this.getOrderData()
            }
        },
    }
</script>
<style lang="scss" scoped></style>
